.plant-t-clock-tomato {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/img/bgi_clock-tomato.jpg');
    background-position: center;
    background-size: cover;
    position: relative;

    .clock-list {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 60px;
        height: 60px;
        background-image: url('../../assets/img/img_tomato_list.png');
        background-position: center;
        background-size: cover;
        cursor: pointer;
        &:hover{
            width: 65px;
            height: 65px;
        }
    }

    .clock-setting {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 60px;
        height: 60px;
        background-image: url('../../assets/img/img_tomato_setting.png');
        background-position: center;
        background-size: cover;
        cursor: pointer;
        &:hover{
            width: 65px;
            height: 65px;
        }
    }

    .clock-box{
        position: absolute;
        top: 0;
        right: 0;
        bottom:0;
        left:0;
        margin:auto;
        width: 240px;
        height: 240px;
        background-image: url('../../assets/img/img_tomato.png');
        background-position: center;
        background-size: 100% 100%;
        .box{
            width:100%;
            height:100%;
            position: relative;
            .time{
                position: absolute;
                width:170px;
                height:50px;
                // background-color: red;
                top:0;
                bottom:20px;
                left:0;
                right:0;
                margin: auto;
                font-size:53px;
                font-weight:bold;
                color:#e1e1e1;
                text-shadow: 1px 1px 5px #000;
                letter-spacing: 5px;
            }
            .control{
                position: absolute;
                width:50px;
                height:50px;
                top:130px;
                bottom:0;
                left:0;
                right:0;
                margin: auto;
                cursor: pointer;
                &:hover{
                    width:55px;
                    height:55px; 
                }
                .iconfont{
                    width:100%;
                    height:100%;
                }
            }
        }
    }

    .tomato-card{
        width:86%;
        height:80px;
        margin:10px auto;
        background-color: #fff;
        box-shadow: 1px 2px 7px #999;
        display: flex;
        flex-direction: column;
        color:#666;
        text-align: center;
        .info{
            flex:1;
            width:100%;
            display: flex;
            flex-direction: row;
            line-height: 40px;
            .status{
                flex:1;
                
                &.finished{
                    color:#99CC99;
                }
                &.break{
                    color:#FF6666;
                }
            }
            .time{
                flex:1;
            }
        }
        .date{
            flex:1;
            width:100%;
            line-height: 40px;
        }
    }

    .clear-btn{
        cursor: pointer;
        &:hover{
            color: #FF6666;
        }
    }
}